<template>
  <div class="bgm">
    <!-- 底部tablebar -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/highlight" icon="home-o">文章</van-tabbar-item>
      <van-tabbar-item to="/registerdetails" icon="service-o"
        >AI</van-tabbar-item
      >
      <van-tabbar-item to="/recommen" icon="more-o" position="top-left:10px"
        ><van-badge :content="message">
          <div class="child">评论</div>
        </van-badge></van-tabbar-item
      >
      <van-tabbar-item to="/original" icon="cluster-o">原创</van-tabbar-item>
      <van-tabbar-item to="/hot" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
    <router-view></router-view>
  </div>
</template>


<script setup>
import { onMounted, ref } from "vue";
import { getcommentinfo } from "../../api/getlogin";

const message = ref(0);
const getcommentinfos = async () => {
  const { data: res } = await getcommentinfo();
  message.value = res.length;
};
onMounted(() => {
  // const { data: res } = await getlogin();
  // console.log(res);
  getcommentinfos();
});
</script>
 


<style  scoped>
::v-deep .van-badge--top-right {
  top: -26px;
  right: 0;
  transform: translate(50%, -50%);
}
</style>